<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12306 汽车票</title>
    <link rel="stylesheet" href="framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="framework/reset.css">
    <link rel="stylesheet" href="styles/bus-ticket.css">
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <!-- 左边angle部分 -->
            <a class="angle-left" href="index.html">
                <i class="fa fa-angle-left"></i>
            </a>
            <!-- 右边分享部分 -->
            <div class="share">
                <i class="fa fa-share-square-o"></i>
            </div>
        </header>

        <!-- 查询汽车票部分 -->
        <div class="bus-ticket">
            <div class="bus-ticket-info">
                <div class="place">
                    <p>昆明</p>
                    <i class="fa fa-exchange"></i>
                    <p>玉溪</p>
                </div>
                <div class="date">
                    <p class="month-day">7月8日</p>
                    <p class="week-day">周一</p>
                </div>
                <div class="button-ticket-query">
                    <button>查询汽车票</button>
                </div>
                <div class="ticket-query-history">
                    <p class="history-1">昆明市-玉溪</p>
                    <p class="delete-history">清除历史</p>
                </div>
            </div>
        </div>

        <!-- 广告部分 -->
        <div class="bus-ad">
            <img src="images/bus-ad1.png" alt="">
            <img src="images/bus-ad2.png" alt="">
        </div>

        <!-- 其他信息部分 -->
        <div class="other-info-box">
            <div class="text">
                <p class="left">服务条款</p>
                <p class="right">预订须知</p>
            </div>
            <div class="phone-number">
                <i class="fa fa-phone"></i>
                <p>客服电话：4008812306</p>
            </div>
        </div>
        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li class="booking">
                <i class="fa fa-bus"></i>
                <p>预订</p>
            </li>
            <li>
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
        </ul>
    </div>
</body>
</html>